<template>
  <!-- 内容区 -->
  <div class="swiper-container">
    <div class="swiper-wrapper" :style="bodyHeight()">
      <li
        class="swiper-slide"
        v-for="(item, index) in obj"
        v-bind:key="item.uuid"
      >
        <!-- 内容区文案区 -->
        <div class="banner">
          <!-- 背景图 -->
          <img :src="`${item.cover}`" alt="无" />
        </div>
        <!-- 内容区哇 -->
          <div class="bd-content">
        <div class="txt">
          <p>{{ item.content }}</p>
        </div>
        <div class="title">
          <p>- {{ item.workFrom }}-</p>
        </div>
        <div class="small-btn">
          <ul>
            <li @click="mylike(index, item.uuid)">
              <router-link to="#">
                <i class="iconfont icon-dianzan"></i>
                <span>{{ item.like }}</span>
              </router-link>
            </li>
            <li>
              <!-- 传值问题 -->
              <!-- <router-link to="/comment">
                <i class="iconfont icon-duihuaxinxi"></i>
                <span>{{item.comments}}</span>
              </router-link> -->
              <!-- 动态路由跳转  动态绑定to属性-->
              <router-link
                v-bind:to="{
                  name: 'Comment',
                  query: { id: `${item.uuid}` },
                }"
              >
                <i class="iconfont icon-duihuaxinxi"></i>
                <span>{{ item.comments }}</span>
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-shoucang"></i>
                <span>收藏</span>
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-fenxiang"></i>
                <span>分享</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      </li>
    </div>
  </div>
</template>
<script>
import Swiper from "../assets/swiper/dist/js/swiper.min.js";
import "../assets/swiper/dist/css/swiper.min.css";
export default {
  name: "homePage01",
  data() {
    return {
      obj: {},
      x: [],
      HH: "",
      tempH: 0,
    };
  },
  methods: {
    mylike(d, f) {
      this.x.push(f);
      sessionStorage.setItem("key", JSON.stringify(this.x));
    },
    //
    bodyWidth() {
      let width =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      setTimeout(() => {
        return width + "px";
      }, 1000);
    },
    bodyHeight() {
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      // 动态获取上下高度
      h = h - 80;
      // h = h - this.tempH;
      return "height:" + h + "px";
    },
  },
  mounted() {
    //   this.tempH =
    //   this.$refs.footer.offsetHeight + this.$refs.header.offsetHeight;
    // console.log((this.HH = this.bodyHeight()), this.HH);
    let pro = axios.get("./data.json");
    pro
      .then((res) => {
        this.obj = res.data.data.list;
      })
      .catch((err) => {
        console.log(err);
      });
    //
   setTimeout(()=>{
      let mySwiper = new Swiper(".swiper-container", {
      direction: "vertical",
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
    });
   },1000)
  },
};
</script>
<style lang="scss" scoped>
// 自适应
.swiper-container {
  width: 100%;
  height: 100%;
  margin-top: 46px;
  .swiper-wrapper {
    width: 375px;
    height: 667px;
    .swiper-slide {
      width: 100%;
      height: 100%;
      list-style: none;
    }
  }
}
// 内容区文案区
.banner {
  width: 100%;
  height: 240px;
  // margin-top: 46px;
  img {
    width: 100%;
    height: 240px;
  }
}
// 详情区，点赞区
.bd-content {
  width: 100%;
  // height: 296px;
  // position: relative;
  background: rgb(255, 255, 255);

  .txt {
    width: 320px;
    height: 180px;
    margin: 30px auto 18px;
    background: rgb(255, 255, 255);
    font-size: 16px;
    p {
      line-height: 1.4;
      // 字体间距
      letter-spacing: 0.5px;
    }
  }
  .title {
    width: 320px;
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
    p {
      //  margin: 10px auto;
    }
  }
  .small-btn {
    width: 320px;
    //  margin: 0 auto;
    font-size: 12px;
    position: absolute;
    left: 0;
    //  top: 0;
    right: 0;
    bottom: 50px;
    margin: 0 auto;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          i {
            font-size: 18px;
            &:hover {
              color: red;
            }
          }
          span {
            margin-top: 5px;
            font-size: 12px;
          }
          &:hover {
            //   针对a标签移动端高亮
            -webkit-tap-highlight-color: rgb(255, 255, 255);
          }
        }
        //   .active {
        //    针对a标签移动端高亮
        // -webkit-tap-highlight-color: rgb(255, 255, 255);
        // }
      }
    }
  }
}
</style>